<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <style>
        #app {
            display: flex;
            background-color: aliceblue;
        }

        .nav {
            margin: 10px;
            width: 200px;
            height: 600px;
            border: 5px solid lawngreen;
            text-align: center;
            font-size: 20px;
        }

        .content {
            border: 5px solid sandybrown;
            margin: 10px;
            width: 100%;

        }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav">
            <router-link to="/teacher">教师管理</router-link><br />
            <router-link to="/student">学生管理</router-link><br />
            <router-link to="/chengji">学生成绩管理</router-link><br />

        </div>
        <div class="content">
            <router-view></router-view>
        </div>

    </div>
    <script>
        //1、定义组件
        var comA = {
            template: `
            <div>
                教师管理              
            </div>
            `

        }
        var comB = {
            template: `
            <div>
                学生管理   
                <button @click="click1">寝室管理</button> 
                <button @click="click1">在校管理</button> 
                <div>
                    <router-view></router-view>
                </div> 
            
                       
            </div>
            `,
            methods: {
                click1(e) {
                    if (e.target.innerText == '寝室管理') {
                        this.$router.push({
                            path: '/student/qinshi',
                            query: { name: 'zhangsan', age: 12 }

                        })
                    } else {
                        this.$router.push({
                            // path:'/student/zaixiao',
                            name: 'reg',
                            params: { name: 'lisi', gender: 'male' }

                        })
                    }

                }
            }

        }
        var comC = {
            template: `
            <div>
                学生成绩管理             
            </div>
            `

        }
        var qinshi = {
            template: `
            <div>
                寝室管理             
            </div>
            `

        }
        var zaixiao = {
            template: `
            <div>
                在校管理 <button @click="click2">返回</button>            
            </div>
            `,
            methods:{
                click2(){
                    this.$router.go(-1)
                }
            }

        }
        //2、配置路由
        var router = new VueRouter({
            mode: 'history',
            routes: [{
                path: '/teacher',
                component: comA,
            },
            {
                path: '/student',
                component: comB,
                children: [
                    {
                        path: 'qinshi',
                        component: qinshi,
                    },
                    {
                        path: 'zaixiao',
                        component: zaixiao,
                        name: 'reg'

                    },
                ]
            },
            {
                path: '/chengji',
                component: comC,
            },
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            //3、定义路由
            router

        })
    </script>
</body>

</html>